<template>
	<div class='container'>
		<h3>子组件</h3>
		{{ msg }}
		<button @click="onClick">改值</button>
		<br />
		<hr />
		<br />
		<h3>symbol作为键名的依赖注入</h3>
		<div>{{ msg1 }}</div>
		<div>{{ msg2 }}</div>
	</div>
</template>

<script setup>
import { inject } from 'vue';
import { myInjectionKey1, myInjectionKey2 } from './symbolKeys';

const { msg, setMsg } = inject('useMsg');
const msg1 = inject(myInjectionKey1);
const msg2 = inject(myInjectionKey2);
const onClick = () => {
	setMsg(msg.value + 1);
}
</script>
<style lang='less' scoped>
.container {}
</style>
